<template>
  <div class="grid-container">
    <div class="page-bread">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/outstorage_action/picking' }">移动出库</el-breadcrumb-item>
        <el-breadcrumb-item>出库单详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="detail-content">
      <el-tabs activeName="detail">
				<el-tab-pane label="受注出库单" name="detail">
					<el-row>
						<el-col :span="10">
							<div class="detail-item">
								<span>受注编号</span>
								<div>{{ order.OrderNo }}</div>
							</div>
						</el-col>
						<el-col :span="10">
							<div class="detail-item">
								<span>出库场所代码</span>
								<div>{{ order.PlaceCD }}</div>
							</div>
						</el-col>
                        <el-col :span="10">
                            <div class="detail-item">
                                <span>商店</span>
                                <div>{{ order.customer ? order.customer.ShopSignNM : order.CustomerCd }}</div>
                            </div>
                        </el-col>
						<el-col :span="10">
							<div class="detail-item">
								<span>送货地代码</span>
								<div>{{ order.deliver ? order.deliver.DeliverAdd : order.DeliverAddCD }}</div>
							</div>
						</el-col>
                        <el-col :span="10">
                            <div class="detail-item">
                                <span>备注</span>
                                <div>{{ order.Memo }}</div>
                            </div>
                        </el-col>
						<el-col :span="10">
							<div class="detail-item">
								<span>备注特殊送货地地址</span>
								<div>{{ order.DeliverAddMemo }}</div>
							</div>
						</el-col>
						<el-col :span="10">
							<div class="detail-item">
								<span>创建时间</span>
								<div>{{ order.created_at }}</div>
							</div>
						</el-col>
					</el-row>
				</el-tab-pane>
			</el-tabs>
    </div>
    <div class="detail-content">
      <el-tabs activeName="table">
        <el-tab-pane label="商品明细" name="table">
          <div class="statistic-content">
            <p>
              统计：
              <span>产品种类：{{ products.length }}</span>
            </p>
          </div>
          <el-table :data="products" v-loading.body="loading" stripe style="width: 100%">
            <el-table-column prop="CompanyShortNm" label="公司" min-width="200">
            </el-table-column>
            <el-table-column prop="PRODCHINM" label="产品中文名称" min-width="300">
            </el-table-column>
            <el-table-column prop="PRODENGNM" label="产品英文名称" min-width="300">
            </el-table-column>
            <el-table-column prop="ProductAvail" label="商品有效期（月）" min-width="150">
            </el-table-column>
            <el-table-column prop="OrderAvail" label="订货有效期（月）" min-width="150">
            </el-table-column>
            <el-table-column prop="total" label="受注数量" min-width="150">
            </el-table-column>
            <el-table-column prop="outTotal" label="已出库数量" min-width="150">
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { getByNos } from '@/api/picking'

export default {
  data() {
    return {
      loading: true,
      order: {},
      products: []
    }
  },
  created() {
    this.loadOrders([this.$route.params.id])
  },
  methods: {
    loadOrders(ids) {
      this.loading = true
      getByNos({ ids: ids, is_detail: 1 })
        .then(res => {
          this.order = res.data.orders.pop()
          this.products = res.data.products
          for (let i = 0; i < this.products.length; i++) {
            this.products[i].stocks = []
          }
          setTimeout(() => {
            this.loading = false
          }, 100)
        })
        .catch(error => {
          this.$router.push({
            path: '/outstorage_action/picking'
          })
        })
    }
  }
}
</script>
<style lang="less">
.grid-container {
  height: auto;
  overflow: hidden;
  .detail-content {
    position: relative;
    height: auto;
    overflow: hidden;
    padding: 22px 15px;
    background: #fff;
    .detail-item {
      height: auto;
      overflow: hidden;
      line-height: 30px;
      font-size: 14px;
      padding-left: 30px;
      > span {
        display: inline-block;
        width: 150px;
        float: left;
        color: #333;
      }
      > div {
        margin-left: 160px;
        color: #999;
      }
    }
    .btn-box {
      position: absolute;
      top: 25px;
      right: 15px;
      z-index: 10;
    }
  }
  .action-column {
    text-align: right;
  }
  .color-gred {
    color: #999;
  }
}
.table-form-item {
  position: relative;
  height: 100%;
  width: 100%;
  .error-text {
    font-size: 12px;
    color: #f97042;
  }
}
.warehouse-select {
  margin-right: 20px;
  margin-bottom: 20px;
}
</style>